<style>
.layui-tab-item{ }
.layui-tab-item li{ display: table-cell;border:1px solid #fee;padding: 8px;margin:1px;font-size: 1.4em;float: left; }
.layui-tab-item i{ }
#icon-select{
  display:none;padding:10px;
}
#icon-select .hide{ display: none; }
#icon-select .icon-search label{
  text-align:left;border:1px solid #ddd;
}
#icon-select .layui-tab-content{
  padding:10px 0;
}
#icon-select .layui-tab-content li{
  cursor: pointer;width: 20px;
}
#icon-select .layui-tab-content li:hover{
  border-color: #aaa;
}
</style>
<div id="icon-select">
  <div id="icon-search layui-form">
    <div class="layui-form-item">
      <label for="icon-class" class="layui-form-label">{{ LL('search icon') }}</label>
      <div class="layui-input-inline">
        <input type="text" name="icon-class" id="js-icon-search" value="" class="layui-input" placeholder="{{ L('eg') }}: 输入 home"  autocomplete="off" required  lay-verify="required" >
      </div>
    </div>
  </div>
{php}
  $icon1='rate-half,rate,rate-solid,cellphone,vercode,login-wechat,login-qq,login-weibo,password,username,refresh-3,auz,spread-left,shrink-right,snowflake,tips,note,home,senior,refresh,refresh-1,flag,theme,notice,website,console,face-surprised,set,template-1,app,template,praise,tread,male,female,camera,camera-fill,more,more-vertical,rmb,dollar,diamond,fire,return,location,read,survey,face-smile,face-cry,cart-simple,cart,next,prev,upload-drag,upload,download-circle,component,file-b,user,find-fill,*loading,*loading-1,add-1,play,pause,headset,video,voice,speaker,fonts-del,fonts-code,fonts-html,fonts-strong,unlink,picture,link,face-smile-b,align-left,align-right,align-center,fonts-u,fonts-i,tabs,radio,circle,edit,share,delete,form,cellphone-fine,dialogue,fonts-clear,layer,date,water,code-circle,carousel,prev-circle,layouts,util,templeate-1,upload-circle,tree,table,chart,chart-screen,engine,triangle-d,triangle-r,file,set-sm,add-circle,404,about,up,down,left,right,circle-dot,search,set-fill,group,friends,reply-fill,menu-fill,log,picture-fine,face-smile-fine,list,release,ok,help,chat,top,star,star-fill,close-fill,close,ok-circle,add-circle-fine';
  $icon1=explode(',',$icon1);
  $icon1_c = count($icon1);
  $icon2='hand-grab-o,hand-lizard-o,hand-o-down,hand-o-left,hand-o-right,hand-o-up,hand-paper-o,hand-peace-o,hand-pointer-o,hand-rock-o,hand-scissors-o,hand-spock-o,hand-stop-o,thumbs-down,thumbs-o-down,thumbs-o-up,thumbs-up,align-center,align-justify,align-left,align-right,bold,chain,chain-broken,clipboard,columns,copy,cut,dedent,eraser,file,file-o,file-text,file-text-o,files-o,floppy-o,font,header,indent,italic,link,list,list-alt,list-ol,list-ul,outdent,paperclip,paragraph,paste,repeat,rotate-left,rotate-right,save,scissors,strikethrough,subscript,superscript,table,text-height,text-width,th,th-large,th-list,underline,undo,unlink,angle-double-down,angle-double-left,angle-double-right,angle-double-up,angle-down,angle-left,angle-right,angle-up,arrow-circle-down,arrow-circle-left,arrow-circle-o-down,arrow-circle-o-left,arrow-circle-o-right,arrow-circle-o-up,arrow-circle-right,arrow-circle-up,arrow-down,arrow-left,arrow-right,arrow-up,arrows,arrows-alt,arrows-h,arrows-v,caret-down,caret-left,caret-right,caret-square-o-down,caret-square-o-left,caret-square-o-right,caret-square-o-up,caret-up,chevron-circle-down,chevron-circle-left,chevron-circle-right,chevron-circle-up,chevron-down,chevron-left,chevron-right,chevron-up,exchange,hand-o-down,hand-o-left,hand-o-right,hand-o-up,long-arrow-down,long-arrow-left,long-arrow-right,long-arrow-up,toggle-down,toggle-left,toggle-right,toggle-up';
  $icon2=explode(',',$icon2);
  $icon2_c = count($icon2);
{/php}
  <div class="layui-tab layui-tab-brief">
    <ul class="layui-tab-title">
      <li class="layui-this">LAYUI({$icon1_c})</li>
      <li>FONT-AWESOME({$icon2_c})</li>
    </ul>
    <div class="layui-tab-content">
      <div class="layui-tab-item layui-show">
        <!-- layui2.4.5(140) -->
        <ul class="layui-clear">
          {volist name="icon1" id="v"}
            {php}
              $temp = ltrim($v,'*')==$v ? '':'layui-anim layui-anim-rotate layui-anim-loop';
              $v=$temp ? ltrim($v,'*') : $v;
            {/php}
            <li title="{$v}"><i class="layui-icon layui-icon-{$v} {$temp}"></i></li>
          {/volist}
        </ul>
      </div>
      <div class="layui-tab-item">
        <ul>
          <!-- hand 17 -->
          <!-- text editor(49) -->
          <!-- direct(53) -->
          {volist name="icon2" id="v"}
            <li title="{$v}"><i class="fa fa-{$v}"></i></li>
          {/volist}
        </ul>
      </div>
    </div>
  </div>
</div>